---
title: Tabs
description: Tabs
layout: PreviewAndImplementation
---

## !demo

Show multiple code blocks in tabs.

<Demo name="tabs" content="content.mdx" />

## !implementation

We use the [`Tabs` components](https://ui.shadcn.com/docs/components/tabs) from shadcn/ui:

```bash -c
npx shadcn@latest add tabs
```

And then create a component to handle multiple codeblocks as tabs:

```tsx code.tsx -c
import { Block, CodeBlock, parseProps } from "codehike/blocks"
import { Pre, highlight } from "codehike/code"
import { z } from "zod"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

// !fold[/className="(.*?)"/gm]
const Schema = Block.extend({ tabs: z.array(CodeBlock) })
async function CodeWithTabs(props: unknown) {
  const { tabs } = parseProps(props, Schema)
  return <CodeTabs tabs={tabs} />
}

export async function CodeTabs(props: { tabs: RawCode[] }) {
  const { tabs } = props
  const highlighted = await Promise.all(
    tabs.map((tab) => highlight(tab, "github-dark")),
  )
  return (
    <Tabs defaultValue={tabs[0]?.meta} className="dark rounded">
      <TabsList className="rounded-none">
        {tabs.map((tab) => (
          <TabsTrigger key={tab.meta} value={tab.meta}>
            {tab.meta}
          </TabsTrigger>
        ))}
      </TabsList>
      {tabs.map((tab, i) => (
        <TabsContent key={tab.meta} value={tab.meta} className="mt-0">
          <Pre code={highlighted[i]} className="m-0 rounded-none bg-zinc-950" />
        </TabsContent>
      ))}
    </Tabs>
  )
}
```
